<template>
  <div class="statistics-box">
    <div class="box-item" :key="index" v-for="(item,index) in state.statisticsArr[0]?.statistics">
      <div class="img-box">
        <img :src="getStatisticsURL(item.icon)" />
      </div>
      <div class="num-title">
        <div class="title">{{item.staProject}}</div>
        <div class="num-box">
          <span>{{item.staNum}}</span>
          <span>{{item.staUnit}}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, watch } from 'vue'
import { getStatisticsURL } from '@/utils/loadAssets'
import emitter from '@/utils/bus'
import model_statistics from '@/assets/data/map_data/model_statistics.json'
import yshmodel_statistics from '@/assets/data/map_data/yshmodel_statistics.json'

const state = reactive({
  statisticsArr: [],
  btnName: ''
})
const props = defineProps({
  riverValue: {
    type: String,
    default: 1
  }
})
emitter.on('mapLayerHandle', (value) => {
  state.btnName = value.btnName
  if (props.riverValue == 1) {
    state.statisticsArr = model_statistics.filter((item) => {
      return item.model == state.btnName
    })
  } else if (props.riverValue == 2) {
    state.statisticsArr = yshmodel_statistics.filter((item) => {
      return item.model == state.btnName
    })
  }
})
watch(
  () => props.riverValue,
  () => {
    if (props.riverValue == 1) {
      state.statisticsArr = model_statistics.filter((item) => {
        return item.model == state.btnName
      })
    } else if (props.riverValue == 2) {
      state.statisticsArr = yshmodel_statistics.filter((item) => {
        return item.model == state.btnName
      })
    }
  },
  {
    deep: true
  }
)
</script>
<style lang="less" scoped>
.statistics-box {
  position: absolute;
  top: 20px;
  left: 650px;
  display: flex;
  justify-content: space-around;
  width: 600px;
  height: 60px;
  margin: 10px 0;
  background-image: url(@/assets/images/left_img.png);
  background-repeat: no-repeat;
  border-radius: 5px;
  background-size: 100% 100%;

  .box-item {
    display: flex;
    align-items: center;
    .img-box {
      margin-right: 10px;
      img {
        width: 35px;
        height: 35px;
      }
    }
    .num-title {
      .title {
        color: white;
        font-size: 18px;
      }
      .num-box {
        span:nth-of-type(1) {
          font-family: 'Arial Narrow Bold', 'Arial Narrow', 'Arial', sans-serif;
          font-weight: 700;
          font-size: 20px;
          color: rgba(245, 154, 35, 0.8196078431372549);
        }
        span:nth-of-type(2) {
          font-family: 'ArialMT', 'Arial', sans-serif;
          font-weight: 400;
          color: #ffffff;
          font-size: 12px;
        }
      }
    }
  }
}
</style>
